<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的快件信息</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<style type="text/css">
	body{
		margin: 0;
		padding: 0;
		background-color: #eeeeee;
		font-family: "楷体";
	}
	.item{
		margin: 20px;
		margin-bottom: 50px;
	}
	.imte_top{
		text-align: center;
	}
	.imte_top>span{
		font-size:14px;
		display: inline-block;
		padding: 5px 12px;
		background-color: #ddd;
		color:#fff;
		border-radius: 5px;
	}
	.item_content{
		background-color: #fff;
		padding: 25px 15px;
		margin-top: 6px;
	}
	.item_content_top_1{
		font-size: 24px;
		font-weight: bold;
	}
	.item_content_top_2{
		color:#eee;
		font-size: 14px;
		margin: 5px 0px;
	}
	.item_content_top_3{
		margin: 10px 0px;
	}
	.item_content_top_4{
		margin: 10px 0px;
	}
	.item_content_bottom>a{
		text-decoration: none;
		color:#33e;
	}
</style>
</head>
<body>
	<div class="content" id="status0Content"></div>
	<div class="content"  id="status1Content"></div>
</body>
<script src="js/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script>
	$(function (){
		$.getJSON("/express/findExpressByNumber.do",null,function (data){
			//得到后台给的map集合[状态:{数据}]
			/**
			 * {
			  		"status0":[
			  			{
							"id": 141,
							"number": "1233900",
							"userPhone": "彭德华",
							"userName": "18941172176",
							"company": "顺丰快递",
							"code": "9900000",
							"inTime": "2021-02-01 13:32:18",
							"outTime": "未出库",
							"status": "待取件",
							"sysPhone": "18888888"
						}
					]
				}
			 */
			var data0 = data.data.status0;

			for (i = 0; i < data0.length; i++) {
				//下面就是前端的编写
				var item = "<div class=\"item\">\n" +
						"\t\t\t<div class=\"imte_top\"><span>"+data0[i].inTime+"</span></div>\n" +
						"\t\t\t<div class=\"item_content\">\n" +
						"\t\t\t\t<div class=\"item_content_top\">\n" +
						"\t\t\t\t\t<div class=\"item_content_top_1\">取件通知</div>\n" +
						"\t\t\t\t\t<div class=\"item_content_top_2\">"+data0[i].inTime+"</div>\n" +
						"\t\t\t\t\t<div class=\"item_content_top_3\">您有一个包裹到e栈了!</div>\n" +
						"\t\t\t\t\t<div class=\"item_content_top_4\">\n" +
						"\t\t\t\t\t\t取件码:<span style=\"color:#2971ba\">"+data0[i].code+"</span><br>\n" +
						"\t\t\t\t\t\t快递公司:"+data0[i].company+"<br>\n" +
						"\t\t\t\t\t\t运单号码:"+data0[i].number+"<br>\n" +
						"\t\t\t\t\t\t站点电话:"+data0[i].sysPhone+"<br>\n" +
						"\t\t\t\t\t\t取件地址:学校快件集散中心<br>\n" +
						"\t\t\t\t\t</div>\n" +
						"\t\t\t\t</div>\n" +
						"\t\t\t\t<hr>\n" +
						"\t\t\t\t<div class=\"item_content_bottom\">\n" +
						"\t\t\t\t\t<a href=\"/wx/createQRCode.do?type=express&code="+data0[i].code+"\">二维码</a>\n" +
						"\t\t\t\t</div>\n" +
						"\t\t\t</div>\n" +
						"\t\t</div>";
				//每循环一个就增加一个item
				$("#status0Content").append($(item));//方式方法记住了 追击进去的方法
			}

			/**
			 * {
					"status1": [
						{
							"id": 133,
							"number": "1233100",
							"userPhone": "彭德华",
							"userName": "18941172176",
							"company": "顺丰快递",
							"code": "1900000",
							"inTime": "2021-02-01 13:32:18",
							"outTime": "2021-02-01 13:33:56",
							"status": "已取件",
							"sysPhone": "18888888"
						}
					]
				}
			 */
			var data1 = data.data.status1;
			for (i = 0; i < data1.length; i++) {
				var item = "<div class=\"item\">\n" +
						"\t\t\t<div class=\"imte_top\"><span>"+data1[i].outTime+"</span></div>\n" +
						"\t\t\t<div class=\"item_content\">\n" +
						"\t\t\t\t<div class=\"item_content_top\">\n" +
						"\t\t\t\t\t<div class=\"item_content_top_1\">取件成功通知</div>\n" +
						"\t\t\t\t\t<div class=\"item_content_top_2\">"+data1[i].outTime+"</div>\n" +
						"\t\t\t\t\t<div class=\"item_content_top_3\">您有一个包裹从e栈取出了!</div>\n" +
						"\t\t\t\t\t<div class=\"item_content_top_4\">\n" +
						"\t\t\t\t\t\t快递公司:"+data1[i].company+"<br>\n" +
						"\t\t\t\t\t\t运单号码:"+data1[i].number+"<br>\n" +
						"\t\t\t\t\t\t站点电话:"+data1[i].sysPhone+"<br>\n" +
						"\t\t\t\t\t</div>\n" +
						"\t\t\t\t</div>\n" +
						"\t\t\t\t<hr>\n" +
						"\t\t\t\t<div class=\"item_content_bottom\">\n" +
						"\t\t\t\t\t<a href=\"#\">有疑问 ? 点了也没用</a>\n" +
						"\t\t\t\t</div>\n" +
						"\t\t\t</div>\n" +
						"\t\t</div>";
				$("#status1Content").append($(item));
			}
		});
	});
</script>
</html>